<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>兆千图</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/news.css">
    <style>
        h3 {
            margin-bottom: 30px;
        }

        .btn {
            margin-top: 50px;
            font-size: 12px;
            color: #F46CEF;
        }

        .lock-img {
            width: 60px;
            margin: 50px 0 30px;
        }
    </style>
</head>

<body>
    <div class="wrap flex-c flex-col" id="view" v-cloak>
        <header id="fx-header"></header>
        <img src="../../image/img_safelock.png" class="lock-img" alt="">
        <h3>{{textObj[textIndex]}}</h3>
        <div id="gesturepwd"></div>
        <button class="btn" onclick="closeFrm()" v-if="type == 1">{{_i18n('取消设置')}}</button>
        <button class="btn" onclick="logout()" v-else>{{_i18n('退出登录')}}</button>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/gesture_pwd.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            textObj: {
                1: '请绘制新的开锁密码',
                2: '请再绘制一遍来确认',
                3: '请绘制原来设置的开锁图案'
            },
            textIndex: 1,
            pwd: '', // 手势密码
            type: 0, // 1 从设置进入 ，0从其他页面打开 要求输入密码
        },
        methods: {
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
            
        }
    })
    apiready = function () {
        $api.fixStatusBar($api.byId('fx-header'));
        view.type = api.pageParam['type'];
        if (!view.type) {
            api.bringFrameToFront({
                from: 'frame4/pwd'
            });
        }
        _getUser(function (ret) {
            view.ffInfo = ret.result;
            if (view.ffInfo.shoushi) {
                view.textIndex = 3;
            }
        })

        $(function () {
            $("#gesturepwd").GesturePasswd({
                backgroundColor: "#fff", //背景色
                color: "#eee", //主要的控件颜色
                roundRadii: 35, //大圆点的半径
                pointRadii: 10, //大圆点被选中时显示的圆心的半径
                space: 30, //大圆点之间的间隙
                width: 300, //整个组件的宽度
                height: 300, //整个组件的高度
                lineColor: "#aaa", //用户划出线条的颜色
                zindex: 100 //整个组件的css z-index属性
            });
            $("#gesturepwd").on("hasPasswd", function (e, passwd) {
                if (!passwd) return;
                if (view.textIndex == 1) {
                    // 无密码 第一次输入
                    view.pwd = passwd;
                    $("#gesturepwd").trigger("passwdRight");
                    view.textIndex = 2;
                } else if (view.textIndex == 2) {
                    // 再次输入
                    if (passwd == view.pwd) {
                        $("#gesturepwd").trigger("passwdRight");
                        setGesturePwd(passwd);
                    } else {
                        _alert('密码错误', function () {
                            $("#gesturepwd").trigger("passwdWrong");
                        })
                    }
                } else if (view.textIndex == 3) {
                    if (passwd == view.ffInfo.shoushi) {
                        $("#gesturepwd").trigger("passwdRight");
                        if (view.type == 1) {
                            _confirm({
                                msg: '你希望设置新的手势密码，还是取消手势密码？',
                                btn: ['设置新密码', '取消手势密码']
                            }, function (bIndex) {
                                if (bIndex == 1) {
                                    view.textIndex = 1;
                                } else if (bIndex == 2) {
                                    // 关闭手势密码
                                    setGesturePwd('');
                                }
                            })
                        } else {
                            // 关闭密码框
                            closeFrm()
                        }
                    } else {
                        _alert('密码错误', function () {
                            $("#gesturepwd").trigger("passwdWrong");
                        })
                    }
                }
            });
        })

    }

    // 设置密码
    function setGesturePwd(pwd, callback) {
        console.log(pwd)
        _ajax('api/member/shoushi', function (ret, err) {
            console.log(JSON.stringify(ret))
            console.log(JSON.stringify(err))
            if (!callback) {
                _alert(ret.msg, function () {
                    closeFrm()
                })
            } else {
                callback()
            }

        }, {
            user_id: $api.getStorage('userid'),
            password: pwd
        })
    }


    // 关闭
    function closeFrm() {
        if (!view.type) {
            api.closeFrame({
                name: 'frame4/pwd'
            })
        } else {
            api.closeWin({
                name: 'frame4/pwd'
            })
        }
    }

    // 退出登录
    function logout() {

        setGesturePwd('', function () {
            _login()
            setTimeout(function () {
                closeFrm();
            }, 500)
        })
    }
</script>

</html>